<template>
  <div class="singer-detail">
    <div class="top">
      <div class="header">
      <button @click="back">back</button>
       {{name}}
      </div>
      <img :src="mid|avatorFilter" alt="">
    </div>
    <ul class="list">
      <li 
        @click="addList(index)"
        class="list-item" 
        v-for="item,index in list" 
        :key="item.id">
        <h2>{{item.name}}</h2>
        <p>{{item.singer}}* {{item.album}}</p>        
      </li>
    </ul>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import SongMixins from "@mixins/songMixins";
import { CHANGE_LIST } from '@pages/player/types';
import { getSongUrl } from '@pages/player/service';
import { songListById } from "./service";

export default {
  mixins:[SongMixins],
  data() {
    return {
      list: [],
      mid:'',
      name:'暂无数据',
    }
  },
  methods: {
    ...mapActions('player',[CHANGE_LIST]),
    addList(idx) {
      // 在业务逻辑里直接使用mutation
      // this.ADD_CURRENT_LIST(this.list)
      // this.TOGGLE_CURRENT_INDEX(index)
      // this.TOGGLE_TYPE('full')

      // 根据歌曲的mid 获取歌曲的播放链接
      // this.getSongsByMid(idx);
      this.CHANGE_LIST({list:this.list,idx})
    },
    // 获取歌曲url的逻辑存放到actions里
  //  async getSongsByMid(idx) {
  //     const mids = this.list.map(item => item.mid)
  //     const {err,urls} =  await getSongUrl(mids) || [];
  //     if(err) return 
  //     const list = this.list.map((item,index) => {
  //       return {
  //         ...item,
  //         songUrl:urls[index]
  //       }
  //     })
  //     this.CHANGE_LIST({list,idx})
  //   },
    back() {
      this.$router.history.go(-1);
    },
    async getSongListByMid(mid,name) {
      this.mid = mid;
      this.name = name;
      const {code, result } = await songListById(mid) || {}
      if(code) return 
      this.list = result?.songs || []
      
    }
  },
  created() {
    // 组件刚创建获取路由传参
    console.log('初次创建')
    const {mid} = this.$route.params;
    const {name} = this.$route.query;
    this.getSongListByMid(mid,name)
  },
  beforeRouteUpdate(newRoute) {
    console.log('组件更新',)
    const {mid} = newRoute.params;
    const {name} = newRoute.query;
    this.getSongListByMid(mid,name)
   }
 }
</script>
<style scoped lang='less'>
@import '~@style/index.less';
.singer-detail {
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: #222;
  overflow: scroll;
  .top {
    .w(375);
    padding-top:70%;
    border: 1px solid red;
    position: relative;
    .header{
      text-align: center;
      z-index: 1;
      .h(44);
      .l_h(44);
      position: absolute;
      top: 0;
      .w(375);
      color: #fff;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .list {
    box-sizing: border-box;
    .w(375);
    .h(168);
    .padding(20,30,20,30);
    .list-item {
      .h(44);
      h2 {
        color: #fff;
      }
      p {
        color: rgba(255,255,255,.4);
      }
    }
  }
}
</style>